<template>
	<view class="reward-edit">
		<view class="reward-top">
			<text class="money">额度</text>
			<view class="tabs">
				<view class="tab" :class="type==='price'?'active':''" @click="handleClick('price')">
					金额
				</view>
				<view class="tab" :class="type==='quota'?'active':''" @click="handleClick('quota')">
					名额
				</view>
			</view>
		</view>
		<view class="input" v-if="type==='price'">
			<input type="number" v-model="priceNum" placeholder="请输入增加的金额" />
		</view>
		<view class="input" v-if="type==='quota'">
			<input type="number" v-model="quotaNum" placeholder="请输入增加的名额" />
		</view>
		<view class="title">
			<text>汇总</text>
		</view>
		<view class="lists">
			<view class="list">
				<text>当前单价</text>
				<text>{{data.price}} zkb</text>
			</view>
			<view class="list" v-if="type==='price'">
				<text>修后单价</text>
				<text>{{Math.floor((data.price+(priceNum-priceNum*change/100))*100)/100}} zkb</text>
			</view>
			<view class="list">
				<text>剩余名额</text>
				<text>{{data.quota-data.use_quota}} 名</text>
			</view>
			<view class="list" v-if="type==='quota'">
				<text>修后名额</text>
				<text>{{quotaNum ? data.quota-data.use_quota+parseInt(quotaNum) : (data.quota-data.use_quota)}} 名</text>
			</view>
			<view class="list">
				<text>手续费</text>
				<text>{{change}} %</text>
			</view>
			<view class="list">
				<text>您将支付</text>
				<text>{{
					type==='price' 
					? (priceNum*(data.quota-data.use_quota)).toFixed(2)
					: (quotaNum ? parseInt(quotaNum)*(Math.floor((data.price+(change/100)) * 100) / 100) :0.00).toFixed(2)}} zkb
				</text>
			</view>
		</view>
		<view class="btn">
			<button :disabled="isDisabled" 
			:style="{'background': isDisabled? '#b7b6b7' :'#00BD71'}"
			@click="pay()">支付</button>
		</view>
	</view>
</template>

<script>
	import {
		rewardGet,
		addPriceQuota
	} from "@/api/reward.js"
	import {
		configs
	} from "@/api/entrance.js"
	export default {
		name: "reward-edit",
		data() {
			return {
				type: "price",
				priceNum: "", //金额
				quotaNum: "", //名额
				id: "",
				change: 0,
				data: {},
				isDisabled:true,
			}
		},
		onLoad(option) {
			this.type = option.type || "price";
			this.id = option.id || "";
			this.getReword();
			configs({
				type: 'service_charge'
			}).then(res => {
				if (res.code === 1) {
					this.change = res.data;
				}
			})
		},
		methods: {
			handleClick(type) {
				this.type = type
				this.priceNum = ""
				this.quotaNum = ""
			},
			//获取单个悬赏
			async getReword(type) {
				let res = await rewardGet({
					id: this.id
				})
				if (res.code === 1) {
					this.data = res.data
				}
			},
			//支付
			async pay(){
				let data = {
					id:this.id,
					quantity: this.type === 'price' ? Number(this.priceNum).toFixed(2) : parseInt(this.quotaNum),
					action: this.type
				}
				let res = await addPriceQuota(data);
				if(res.code === 1){
					this.$msg(res.msg)
					this.init();
				}else{
					this.$msg(res.msg)
				}
			},
			//初始化数据
			init(){
				this.getReword();
				let pages = getCurrentPages();  //获取所有页面栈实例列表
				let prevPage = pages[ pages.length - 2 ];
				if(prevPage){
					let data = prevPage.$vm.data;
					for(let item of data){
						if(item.id === Number(this.id) && this.type === 'price'){
							item.price = Math.floor((item.price+(this.priceNum-this.priceNum*(this.change/100))) * 100) / 100 
						}
						if(item.id === Number(this.id) && this.type === 'quota'){
							item.quota = item.quota+parseInt(this.quotaNum)
						}
					}
				}
				this.priceNum = ""
				this.quotaNum = "";
			}
		},
		watch: {
			priceNum(newValue){
				if(newValue){
					this.isDisabled = false
				}else{
					this.isDisabled = true
				}
			},
			quotaNum(newValue){
				if(newValue){
					this.isDisabled = false
				}else{
					this.isDisabled = true
				}
			},
		}
	}
</script>

<style scoped lang="less" src="./reward-edit.less">
</style>
